<link rel="stylesheet" media="screen" href="css/jquery.icontacts.css" />
<link rel="stylesheet" media="screen" href="css/contact-detail.css" />
<script type="text/javascript" src="js/jquery.itextclear.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
});
</script>
                        <!-- search -->
                        <div class="wizard">
                            <div class="items">
                            	<!-- search -->
                                <section>
                                    <section style="padding:0;">
                                    	<form class="clearfix" name="search">
						                    <div class="searchcontainer">
						                        <div class="searchbox" onclick="$(this).find('input').focus();">
						                            <input type="text" name="contactsearch" id="contactsearch" autocomplete="off" placeholder="Search...">
						                        </div>
						                    </div>
						                </form>
						                <ul class="icontacts" style="height: 350px;overflow-y:scroll;">
						                    <li id="a" class="item"><a name="a" class="title">A</a> 
						                        <ul> 
						                            <li><a id="1" href="#" class="next">Adam</a></li> 
						                            <li><a href="#" class="next">Alex</a></li> 
						                            <li><a href="#" class="next">Ali</a></li> 
						                            <li><a href="#" class="next">Apple</a></li> 
						                            <li><a href="#" class="next">Arthur</a></li> 
						                            <li><a href="#" class="next">Ashley</a></li> 
						                        </ul> 
						                    </li>
						                    <li id="b" class="item"><a name="b" class="title">B</a> 
							                    <ul> 
						                            <li><a href="#" class="next">Babidi</a></li> 
						                            <li><a href="#" class="next">Billy</a></li> 
						                            <li><a href="#" class="next">Bozarking</a></li> 
						                            <li><a href="#" class="next">Bulma</a></li> 
						                            <li><a href="#" class="next">Bula</a></li> 
						                            <li><a href="#" class="next">Buu</a></li> 
						                        </ul>
					                        </li>
					                        <li id="c" class="item"><a name="c" class="title">c</a> 
						                        <ul> 
						                            <li><a href="#" class="next" >Calista</a></li> 
						                            <li><a href="#" class="next">Cathy</a></li> 
						                            <li><a href="#" class="next">Cheryll</a></li> 
						                            <li><a href="#" class="next">Chichi</a></li> 
						                            <li><a href="#" class="next">Cinderella</a></li> 
						                            <li><a href="#" class="next">Corky</a></li> 
						                            <li><a href="#" class="next">Cypher</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="d" class="item"><a name="d" class="title">d</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Damien</a></li> 
						                            <li><a href="#" class="next">Danny</a></li> 
						                            <li><a href="#" class="next">Denver</a></li> 
						                            <li><a href="#" class="next">Devon</a></li> 
						                            <li><a href="#" class="next">Doug</a></li> 
						                            <li><a href="#" class="next">Dustin</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="e" class="item"><a name="e" class="title">E</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Ellmar</a></li> 
						                            <li><a href="#" class="next">Emian</a></li> 
						                            <li><a href="#" class="next">Ezirek</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="f" class="item"><a name="f" class="title">f</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Fae</a></li> 
						                            <li><a href="#" class="next">Falon</a></li> 
						                            <li><a href="#" class="next">Ferdinand</a></li> 
						                            <li><a href="#" class="next">Fernando</a></li> 
						                            <li><a href="#" class="next">Fred</a></li> 
						                            <li><a href="#" class="next">Frieza</a></li>                             
						                            <li><a href="#" class="next">Frodo</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="g" class="item"><a name="g" class="title">g</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Gesh</a></li> 
						                            <li><a href="#" class="next">Glenda</a></li> 
						                            <li><a href="#" class="next">Gohan</a></li> 
						                            <li><a href="#" class="next">Goku</a></li> 
						                            <li><a href="#" class="next">Goten</a></li> 
						                            <li><a href="#" class="next">Gwen</a></li> 
						                            <li><a href="#" class="next">Gwyneth</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="h" class="item"><a name="h" class="title">h</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Harold</a></li> 
						                            <li><a href="#" class="next">Harry</a></li> 
						                            <li><a href="#" class="next">Hercule</a></li> 
						                            <li><a href="#" class="next">Hernan</a></li> 
						                            <li><a href="#" class="next">Hyper</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="i" class="item"><a name="i" class="title">i</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Ian</a></li> 
						                            <li><a href="#" class="next">Ignasius</a></li> 
						                            <li><a href="#" class="next">Ingrid</a></li> 
						                            <li><a href="#" class="next">Isaac</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="j" class="item"><a name="j" class="title">j</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Jack</a></li> 
						                            <li><a href="#" class="next">James</a></li> 
						                            <li><a href="#" class="next">Jane</a></li> 
						                            <li><a href="#" class="next">Jenny</a></li> 
						                            <li><a href="#" class="next">Joe</a></li> 
						                            <li><a href="#" class="next">John</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="k" class="item"><a name="k" class="title">k</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Kate</a></li> 
						                            <li><a href="#" class="next">Kathy</a></li> 
						                            <li><a href="#" class="next">Katrina</a></li> 
						                            <li><a href="#" class="next">Karen</a></li> 
						                            <li><a href="#" class="next">Karylle</a></li> 
						                            <li><a href="#" class="next">Kesha</a></li> 
						                            <li><a href="#" class="next">Krillin</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="l" class="item"><a name="l" class="title">l</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Lane</a></li> 
						                            <li><a href="#" class="next">Lhuie</a></li> 
						                            <li><a href="#" class="next">Lock</a></li> 
						                            <li><a href="#" class="next">Loise</a></li> 
						                            <li><a href="#" class="next">Lucas</a></li> 
						                            <li><a href="#" class="next">Luud</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="m" class="item"><a name="m" class="title">m</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Mark</a></li> 
						                            <li><a href="#" class="next">Maron</a></li> 
						                            <li><a href="#" class="next">Marrianne</a></li> 
						                            <li><a href="#" class="next">Mary Jane</a></li> 
						                            <li><a href="#" class="next">May Anne</a></li> 
						                            <li><a href="#" class="next">Meynard</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="n" class="item"><a name="n" class="title">n</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Nadja</a></li> 
						                            <li><a href="#" class="next">Naiadi</a></li> 
						                            <li><a href="#" class="next">Naomi</a></li> 
						                            <li><a href="#" class="next">Nard</a></li> 
						                            <li><a href="#" class="next">Nash</a></li> 
						                            <li><a href="#" class="next">Nick</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="o" class="item"><a name="o" class="title">o</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Omar</a></li> 
						                            <li><a href="#" class="next">Opal</a></li> 
						                            <li><a href="#" class="next">Onyx</a></li> 
						                            <li><a href="#" class="next">Onofre</a></li> 
						                            <li><a href="#" class="next">Oman</a></li> 
						                            <li><a href="#" class="next">Ozyrus</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="p" class="item"><a name="p" class="title">p</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Pan</a></li> 
						                            <li><a href="#" class="next">Patrick</a></li> 
						                            <li><a href="#" class="next">Penny</a></li> 
						                            <li><a href="#" class="next">Perry</a></li> 
						                            <li><a href="#" class="next">Peter</a></li> 
						                            <li><a href="#" class="next">Piccolo</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="q" class="item"><a name="q" class="title">q</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Quel</a></li> 
						                            <li><a href="#" class="next">Quelwent</a></li> 
						                            <li><a href="#" class="next">Quessut</a></li> 
						                            <li><a href="#">Queyashia</a></li> 
						                            <li><a href="#" class="next">Quviligura</a></li> 
						                            <li><a href="#" class="next">Quvina</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="r" class="item"><a name="r" class="title">r</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Rachel</a></li> 
						                            <li><a href="#" class="next">Ramon</a></li> 
						                            <li><a href="#" class="next">Raditz</a></li> 
						                            <li><a href="#" class="next">Raul</a></li> 
						                            <li><a href="#" class="next">Raymund</a></li> 
						                            <li><a href="#" class="next">Roshi</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="s" class="item"><a name="s" class="title">s</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Sandara</a></li> 
						                            <li><a href="#" class="next">Sarah</a></li> 
						                            <li><a href="#" class="next">Shamon</a></li> 
						                            <li><a href="#" class="next">Shane</a></li> 
						                            <li><a href="#" class="next">Sherryl</a></li> 
						                            <li><a href="#" class="next">Suhas</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="t" class="item"><a name="t" class="title">t</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Taya</a></li> 
						                            <li><a href="#" class="next">Thim</a></li> 
						                            <li><a href="#" class="next">Thor</a></li> 
						                            <li><a href="#">Tienshinhan</a></li> 
						                            <li><a href="#" class="next">Tim</a></li> 
						                            <li><a href="#" class="next">Timothy</a></li> 
						                            <li><a href="#" class="next">Torin</a></li> 
						                            <li><a href="#" class="next">Trunks</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="u" class="item"><a name="u" class="title">u</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Ubrien</a></li> 
						                            <li><a href="#" class="next">Ubrita</a></li> 
						                            <li><a href="#" class="next">Uhora</a></li> 
						                            <li><a href="#" class="next">Urigalir</a></li> 
						                            <li><a href="#" class="next">Uulong</a></li> 
						                            <li><a href="#" class="next">Uroll</a></li> 
						                            <li><a href="#" class="next">Uub</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="v" class="item"><a name="v" class="title">v</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Vanessa</a></li> 
						                            <li><a href="#" class="next">Vegeta</a></li> 
						                            <li><a href="#" class="next">Vesan</a></li> 
						                            <li><a href="#" class="next">Victoria</a></li> 
						                            <li><a href="#" class="next">Videl</a></li> 
						                            <li><a href="#" class="next">Vladimir</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="w" class="item"><a name="w" class="title">w</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Wensha</a></li> 
						                            <li><a href="#" class="next">Wendell</a></li> 
						                            <li><a href="#" class="next">Wendy</a></li> 
						                            <li><a href="#" class="next">Wesley</a></li> 
						                            <li><a href="#" class="next">Willie</a></li> 
						                            <li><a href="#" class="next">Wilmar</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="x" class="item"><a name="x" class="title">x</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Xabilain</a></li> 
						                            <li><a href="#" class="next">Xarevyr</a></li> 
						                            <li><a href="#" class="next">Xertree</a></li> 
						                            <li><a href="#" class="next">Xeres</a></li> 
						                            <li><a href="#" class="next">Xulos</a></li> 
						                            <li><a href="#" class="next">Xonn</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="y" class="item"><a name="y" class="title">y</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Yajerobi</a></li> 
						                            <li><a href="#" class="next">Yama</a></li> 
						                            <li><a href="#" class="next">Yamucha</a></li> 
						                            <li><a href="#" class="next">Yardrak</a></li> 
						                            <li><a href="#" class="next">Yezur</a></li> 
						                            <li><a href="#" class="next">Yisar</a></li> 
						                        </ul> 
						                    </li> 
						                    <li id="z" class="item"><a name="z" class="title">z</a> 
						                        <ul> 
						                            <li><a href="#" class="next">Zeratul</a></li> 
						                            <li><a href="#" class="next">Zhirag</a></li> 
						                            <li><a href="#" class="next">Zhaias</a></li> 
						                            <li><a href="#" class="next">Zhornagon</a></li> 
						                            <li><a href="#" class="next">Zolon</a></li> 
						                            <li><a href="#" class="next">Zorolon</a></li>
						                        </ul> 
						                    </li>  
						                 </ul>
                                    </section>
                                </section>
                                <!-- search -->
                                <!-- page1 -->
                                <section>
                                    <section>
						                <div class="form has-validation" style="height: 350px;overflow-y:scroll;">
	                                        <div class="clearfix">
	
				                                <label for="form-name" class="form-label">Name</label>
				
				                                <div class="form-input"><span class="value"> Firtname Lastname</span></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-email" class="form-label">Email</label>
				
				                                <div class="form-input"><span class="value">email@companny.com</span></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-birthday" class="form-label">Birthdate</label>
				
				                                <div class="form-input"><span class="value">10/11/2000</span></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-username" class="form-label">Username </label>
				
				                                <div class="form-input"><span class="value">username</span></div>
				
				                            </div>
											
				                            <div class="clearfix">
				
				                                <label for="form-website" class="form-label">Website </label>
				
				                                <div class="form-input"><span class="value">http://company.com</span></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-textarea" class="form-label">About you </label>
				
				                                <div class="form-input form-textarea">
				                                	<span class="value" style="height: 40px;overflow-y: scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis diam, facilisis nec egestas quis, pharetra eget diam. Aliquam sagittis mauris elit, nec pulvinar leo. Duis felis urna, cursus eget commodo sit amet, porttitor vitae est. Phasellus sit amet eros vitae odio eleifend congue ut et libero. Fusce quis dui vel sapien dapibus aliquet. Vestibulum velit tortor, aliquet vitae lacinia vitae, auctor ac dolor. Phasellus porttitor libero eu odio pretium porta. Proin nec sem ligula. Nunc tempus arcu vel urna fermentum aliquam. Nam ornare vehicula venenatis. Aenean molestie sollicitudin sodales. Cras eleifend velit sed diam sodales nec commodo risus facilisis. Proin consectetur ante non leo ultricies in volutpat justo tincidunt. Mauris scelerisque vehicula nisl eu suscipit. Cras dui erat, pellentesque quis consectetur quis, rhoncus eget ipsum. Cras suscipit fringilla aliquet. In hac habitasse platea dictumst. </span>
				                                </div>
				                            </div>
				                            
				                            <div class="clearfix">
				
				                                <label for="form-timezone" class="form-label">Timezone</span></label>
				
				                                <div class="form-input"><span class="value">America/Los Angeles</span></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-gender" class="form-label">Gender</span></label>
				
				                                <div class="form-input"><span class="value">Male</span></div>
				
				                            </div>
						                </div>
                                    </section>

                                    <footer class="clearfix">
                                    	<button type="button" class="button prev fl">Back</button>
                                        <button type="button" class="button next fr">Edit</button>
                                    </footer>

                                </section>

                                <!-- page2 -->
                                <section>
                                    <section>
                                        <div class="form has-validation" style="height: 350px;overflow-y:scroll;">
	                                        <div class="clearfix">
	
				                                <label for="form-name" class="form-label">Name <em>*</em></label>
				
				                                <div class="form-input"><input type="text" id="form-name" name="name" required="required" placeholder="Enter your name" /></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-email" class="form-label">Email <em>*</em></label>
				
				                                <div class="form-input"><input type="email" id="form-email" required="required" placeholder="A valid email address" /></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-birthday" class="form-label">Birthdate</label>
				
				                                <div class="form-input"><input type="date" id="form-birthday" name="date" placeholder="mm/dd/yyyy" /></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-username" class="form-label">Username <em>*</em></label>
				
				                                <div class="form-input"><input type="text" id="form-username" name="username" required="required" maxlength="12" placeholder="Alphanumeric (max 12 char.)" /></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-password" class="form-label">Password</label>
				
				                                <div class="form-input"><input type="password" id="form-password" name="password" maxlength="30" placeholder="max. 30 char." /></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-password-check" class="form-label">Password check</label>
				
				                                <div class="form-input"><input type="password" id="form-password-check" name="check" data-equals="password" maxlength="30" placeholder="Re-enter your password" /></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-website" class="form-label">Website <em>*</em></label>
				
				                                <div class="form-input"><input type="url" id="form-website" required="required" placeholder="A valid URL" /></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-textarea" class="form-label">About you <em>*</em></label>
				
				                                <div class="form-input form-textarea"><textarea id="form-textarea" required="required" rows="5" placeholder="Describe yourself"></textarea></div>
				
				                            </div>
				                            
				                            <div class="clearfix">
				
				                                <label for="form-timezone" class="form-label">Timezone</label>
				
				                                <div class="form-input"><select id="form-timezone"><option>America/Los Angeles</option><option>America/New York</option><option>Asia/Manila</option></select></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-upload" class="form-label">Photo</label>
				
				                                <div class="form-input"><input type="file" id="form-upload" placeholder="80x80 jpeg/png format" /></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-gender" class="form-label">Gender</label>
				
				                                <div class="form-input"><div class="radiogroup"><label><input type="radio" name="gender" id="form-gender" value="male" /> Male</label> <label><input type="radio" name="gender" value="female" /> Female</label></div></div>
				
				                            </div>
				
				                            <div class="clearfix">
				
				                                <label for="form-updates" class="form-label">Receive Updates?</label>
				
				                                <div class="form-input"><div class="checkgroup" ><input type="checkbox" id="form-updates" value="1" /></div></div>
				
				                            </div>
						                </div>
                                    </section>

                                    <footer class="clearfix">
                                        <button type="button" class="button prev fl">Back</button>
                                        <a href="#contacts.html" class="button fr">Save</a>
                                    </footer>

                                </section>
                            </div><!--items-->

                        </div><!--wizard-->

                    

    <!-- WIZARD SETUP -->
    <script type="text/javascript" src="js/jquery.wizard.js"></script>
    <script>
        $(function(){
            $('.wizard').wizard();
        });
    </script>
    <!-- WIZARD SETUP END -->
	<!-- ICONTACTS JS -->
	<script type="text/javascript" src="js/jquery.icontacts.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	    $('.icontacts').iContacts('#contactsearch', {});
	});
	</script>
	<!-- ICONTACTS JS END -->
</body>
</html>